<include file="Public/header"/>
<style>
    .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
    .layui-upload-img-dd{width: 92px; height: 92px; margin: 0 10px 10px 0;float: left;position: relative}
    .layui-upload-img-dd img{
        width: 100%;
        height: 100%;
    }
    .layui-upload-img-dd a{position: absolute;right: 0;top:0;background-color: #009688;height: 20px;line-height: 20px;
        color: #ffffff;font-size:5px;padding: 0 2px}
    .input-group{
        position: relative;
        text-align: center;
    }
    .input-group .layui-input-inline{
        margin-right: 0px;
    }
    .input-group .input-group-addon,.input-group-btn,.add-attr-input{
        float: left;
        height: 38px;
        line-height: 38px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }
    .input-group .input-group-addon{
        border-right: none;
        background-color: #eeeeee;
        color: #98999a;
    }
    .input-group .input-group-btn{
        border-left: none;
    }
    .attr-group {
        border: 1px solid #eee;
        padding: .5rem .75rem;
        margin-bottom: .5rem;
        border-radius: .15rem;
    }

    .attr-group-delete {
        display: inline-block;
        background: #eee;
        color: #fff;
        width: 1rem;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        border-radius: 999px;
    }

    .attr-group-delete:hover {
        background: #ff4544;
        color: #fff;
        text-decoration: none;
    }

    .attr-list > div {
        vertical-align: top;
    }

    .attr-item {
        display: inline-block;
        background: #eee;
        margin-right: 1rem;
        margin-top: .5rem;
        overflow: hidden;
    }

    .attr-item .attr-name {
        padding: .15rem .75rem;
        display: inline-block;
    }

    .attr-item .attr-delete {
        padding: .35rem .75rem;
        background: #d4cece;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
    }

    .attr-item .attr-delete:hover {
        text-decoration: none;
        color: #fff;
        background: #ff4544;
    }
    .input-group .add-attr-input{

    }
    .table-bordered{
        width: 100%;
    }
    .table-bordered td,th{
        border: solid 1px #eeeeee;
        padding: 10px 20px;

    }
</style>

<div class="x-body">
    <form class="layui-form" action="{:U('')}" method="post">
        <volist name="ag" id="attrGroup">
        <div class="layui-form-item attr-group-list" pane="" attr-group-id="{$attrGroup['id']}" attr-group-name="{$attrGroup['attr_group_name']}">

                <label class="layui-form-label">{$attrGroup['attr_group_name']}</label>
                <div class="layui-input-block">
                    <volist name="attrGroup['children']" id="attr">
                    <input type="checkbox" lay-skin="primary" title="{$attr['attr_name']}"  attr-id="{$attr['id']}" attr-name="{$attr['attr_name']}" class="attr-checkbox"   <if condition="$attr['checked']">checked</if>>
                    </volist>
                </div>


        </div>
        </volist>
            <input type="hidden" value="{$id}" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">多规格</label>
            <div class="layui-input-block">


                <div>
                    <div class="input-group mb-2">
                        <span class="input-group-addon" style="width: 100%">多规格价格及库存</span>
                    </div>
                    <div class="attr-content">

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="submit" lay-submit="submit">
                保存
            </button>
        </div>
    </form>

</div>

<include file="Public/footer"/>
<script>
    layui.use(['form','layer','upload'], function(){
        $ = layui.jquery;
        var form = layui.form




        $(function () {
            var Map = function () {
                this._data = [];
                this.set = function (key, val) {
                    for (var i in this._data) {
                        if (this._data[i].key == key) {
                            this._data[i].val = val;
                            return true;
                        }
                    }
                    this._data.push({
                        key: key,
                        val: val,
                    });
                    return true;
                };
                this.get = function (key) {
                    for (var i in this._data) {
                        if (this._data[i].key == key)
                            return this._data[i].val;
                    }
                    return null;
                };
                this.delete = function (key) {
                    for (var i in this._data) {
                        if (this._data[i].key == key) {
                            this._data.splice(i, 1);
                        }
                    }
                    return true;
                };
            };
            var map = new Map();
            var page = {
                    attr_group_list : {$attrGroupList|json_encode},
                      checked_attr_list :{$checkedAttrList}

        }

            for (var i in page.checked_attr_list) {
                var key = [];
                for (var j in page.checked_attr_list[i].attr_list) {

                    key.push(page.checked_attr_list[i].attr_list[j].attr_id);
                }


                map.set(key.sort().toString(), {
                    num: page.checked_attr_list[i].num,
                    price: page.checked_attr_list[i].price,
                });
            }
            getAttrList();

            form.on('checkbox',function () {
                var attr_group_list = [];
                $(".attr-group-list").each(function (index,item) {
                    attr_group_list[index] = {
                        attr_group_id:$(item).attr("attr-group-id"),
                        attr_group_name:$(item).attr("attr-group-name"),
                        attr_list:[]
                    }
                    $(item).find('input').each(function (index2, item2) {

                        attr_group_list[index].attr_list[index2] = {
                            attr_id:$(item2).attr("attr-id"),
                            attr_name:$(item2).attr("attr-name"),
                            checked:$(item2).prop("checked")
                        }
                    })
                });
                page.attr_group_list = attr_group_list;

                getAttrList();
            })
            // $(document).on("change", ".attr-checkbox", function () {
            //     console.log(11111111111);
            //     var attr_group_list = [];
            //     $(".attr-group-list").each(function (index,item) {
            //         attr_group_list[index] = {
            //             attr_group_id:$(item).attr("attr-group-id"),
            //             attr_group_name:$(item).attr("attr-group-name"),
            //             attr_list:[]
            //         }
            //         $(item).find('input').each(function (index2, item2) {
            //
            //             attr_group_list[index].attr_list[index2] = {
            //                 attr_id:$(item2).attr("attr-id"),
            //                 attr_name:$(item2).attr("attr-name"),
            //                 checked:$(item2).prop("checked")
            //             }
            //         })
            //     });
            //     page.attr_group_list = attr_group_list;
            //
            //     getAttrList();
            // });

            function getAttrList() {
                var attr_group_list = [];
                for (var i in page.attr_group_list) {

                    for (var j in page.attr_group_list[i].attr_list) {
                        if (page.attr_group_list[i].attr_list[j].checked) {
                            if (!attr_group_list[i])
                                attr_group_list[i] = [];
                            var object = {
                                attr_id: page.attr_group_list[i].attr_list[j].attr_id,
                                attr_name: page.attr_group_list[i].attr_list[j].attr_name,
                            };
                            attr_group_list[i].push(object);
                        }
                    }
                }
                var array = attr_group_list;
                var len = array.length;

                var results = [];
                var indexs = {};

                function specialSort(start) {
                    start++;
                    if (start > len - 1) {

                        return;
                    }
                    if (!indexs[start]) {
                        indexs[start] = 0;
                    }
                    if (!(array[start] instanceof Array)) {
                        array[start] = [array[start]];
                    }
                    for (indexs[start] = 0; indexs[start] < array[start].length; indexs[start]++) {
                        specialSort(start);
                        if (start == len - 1) {
                            var temp = [];
                            for (var i = len - 1; i >= 0; i--) {
                                if (!(array[start - i] instanceof Array)) {
                                    array[start - i] = [array[start - i]];
                                }
                                if (array[start - i][indexs[start - i]]) {
                                    temp.push(array[start - i][indexs[start - i]]);
                                }
                            }
                            var key = [];
                            for (var i in temp) {
                                key.push(temp[i].attr_id);
                            }
                            var oldVal = map.get(key.sort().toString());
                            if (oldVal) {
                                results.push({
                                    num: oldVal.num,
                                    price: oldVal.price,
                                    attr_list: temp
                                });
                            } else {
                                results.push({
                                    num: 0,
                                    price: 0,
                                    attr_list: temp
                                });
                            }
                        }
                    }
                }

                specialSort(-1);


                var attr_table='';
                if (results.length>0){

                    attr_table+='<table class="table table-bordered">\
                    <thead>\
                    <tr>';
                    for(index in results[0].attr_list){
                        //console.log(index+results[index]);

                        attr_table += '<th>规格</th>';
                    }

                    attr_table+='<th>库存</th>\
                    <th>价格(0表示保持原售价)</th>\
                </tr>\
                </thead>\
                <tbody>';
                    for (var index in results){
                        attr_table += '<tr>';

                        for (var attr_index in results[index].attr_list){
                            attr_table += '<td>\
                <input type="hidden" name="attr['+index+'][attr_list]['+attr_index+'][attr_id]" value="'+results[index].attr_list[attr_index].attr_id+'">\
                    <input type="hidden" name="attr['+index+'][attr_list]['+attr_index+'][attr_name]" value="'+results[index].attr_list[attr_index].attr_name+'" style="width: 40px;">\
                    <span>'+results[index].attr_list[attr_index].attr_name+'</span>\
                    </td>';
                        }


                        attr_table += '<td>\
                    <input name="attr['+index+'][num]" style="width: 40px;" value="'+results[index].num+'">\
                    </td>\
                    <td>\
                    <input name="attr['+index+'][price]" style="width: 40px;" value="'+results[index].price+'">\
                    </td>\
                    </tr>';
                    }


                    attr_table += '</tbody>\
                    </table>';

                }
                $('.attr-content').html(attr_table);
            }
        })

    })

</script>